<script setup lang="ts">
import useTable from '@/components/x-components/hooks/use-table'
import useTableHeight from '@/components/x-components/hooks/use-table-height'
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import XTableColumnFilter from '@/components/x-components/x-table-column-filter/index'
import useTableColumns from '@/components/x-components/hooks/use-table-column'

const TableRef = ref()
const formDialogRef = ref()

const table_rows = [
	{ id: 1, name: '超级管理员', score: 50, account: 'admin' },
	{ id: 2, name: '普通管理员', score: 0, account: 'normal' },
]

const table = useTable({
	name: '管理员',
	query: {
		search_word: '',
	},
	formdata: {
		id: 0,
		name: '',
		account: '',
	},
	// 数据的 account 可编辑，所以添加一个额外属性 _account 绑定编辑输入框的值，提交时同步给 account
	data: table_rows.map((it) => {
		;(it as any)._account = it.account
		return it
	}),
})

// 通过<x-table-edit-field>组件，在table上设置某个字段
const setField = (row) => {
	return new Promise((resolve) => {
		setTimeout(() => {
			row.account = row._account
			resolve(true)
		}, 1000)
	})
}

// 通过<x-table-head>组件，搜索
const tableSearch = (search_word) => {
	table.data = table_rows.filter((it) => it.name.includes(search_word))
}

// 通过<x-form-dialog>组件，编辑数据
const formdataSubmit = (formdata: typeof table.formdata) => {
	return new Promise((resolve) => {
		setTimeout(() => {
			let findIndex = table.data.findIndex((i) => i.id == formdata.id)
			if (findIndex !== -1) {
				Object.assign(table.data[findIndex], formdata)
				resolve(1)
			}
		}, 2000)
	})
}

/** 获得表格列显隐 */
const { columns: table_columns, columnVisible } = useTableColumns(TableRef)
</script>

<template>
	<div class="p-4">
		<x-table-head
			v-model:search-word="table.query.search_word"
			:table-columns="table_columns"
			@search="tableSearch"
		/>
		<el-table
			class="w-full shadow rounded hover:shadow-lg"
			ref="TableRef"
			v-loading="table.state.loading"
			border
			:data="table.data"
			:max-height="useTableHeight().value"
		>
			<el-table-column v-if="columnVisible(0)" prop="id" label="#" width="80" align="center" />
			<el-table-column v-if="columnVisible(1)" label="标签" width="100" align="center">
				<el-tag>标签插槽</el-tag>
			</el-table-column>
			<el-table-column v-if="columnVisible(2) || columnVisible(3)" prop="id" label="#" width="80" align="center">
				<el-table-column v-if="columnVisible(2)" prop="name" label="A" width="80" align="center" />
				<el-table-column v-if="columnVisible(3)" prop="id" label="B" width="80" align="center" />
			</el-table-column>
			<el-table-column v-if="columnVisible('姓名')" prop="name" label="姓名" />
			<el-table-column v-if="columnVisible('积分')" prop="score" label="积分" />
			<el-table-column v-if="columnVisible('帐号')" prop="account" label="帐号" width="300">
				<template #default="{ row }">
					<x-table-edit-field :submit-method="() => setField(row)">
						<div>{{ row.account }}</div>
						<template #input="{ loading }">
							<el-input v-model="row._account" style="width: 100px" :disabled="loading" />
						</template>
					</x-table-edit-field>
				</template>
			</el-table-column>
			<el-table-column v-if="columnVisible('操作')" prop="id" label="操作" width="180">
				<template #default="{ row }">
					<el-button type="primary" @click="formDialogRef?.open(row)">编辑</el-button>
					<el-button type="danger" @click="table.delRow(row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<x-pagination
			v-model:index="table.query.index"
			v-model:limit="table.query.limit"
			:state="table.state"
			@current-change="table.getData()"
			@size-change=";(table.query.index = 1), table.getData()"
		/>

		<x-form-dialog
			ref="formDialogRef"
			v-model:formdata="table.formdata"
			:name="table.name"
			:onClickSubmit="formdataSubmit"
			@cancel="() => table.resetFormdata()"
		>
			<el-form>
				<el-form-item label="名称">
					<el-input v-model="table.formdata.name" />
				</el-form-item>
				<el-form-item label="帐号">
					<el-input v-model="table.formdata.account" />
				</el-form-item>
			</el-form>
		</x-form-dialog>
	</div>
</template>
